<template>
    <div>
        <div>
            显示数据
            {{ username }} {{ password }}
        </div>
        <div>
            用户名：<input type="text" v-model="username">
        </div>
        <div>
            密码：<input type="password" v-model="password">
        </div>
        <div>
            <button @click="login">登录</button>
        </div>
    </div>
</template>
<script setup>
//表单绑定 v-model表单元素使用
//双向数据绑定 视图更新后数据随之改变 数据改变视图更新
import {ref} from 'vue'
let username = ref('')
let password = ref('')

//let formData = ref({
//    username:'',
//    password:'',
//    gender;'',
//    age:''
//})

const login = ()=>{
    console.log(username.value,password.value,'实现登录');
}
</script>
<style scoped>
</style>